<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="dialog"
    title="关联用户"
    width="620px"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="110px" class="demo-dynamic">
      <el-form-item label="添加关联用户">
        <el-select v-model="form.memberId" clearable placeholder="请选择关联用户">
          <el-option
            v-for="item in memberList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="submitForm('form')">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column :index="(index)=>{return (index+1)}" label="序号" type="index" width="50"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <el-popover :ref="scope.row.id" placement="left" width="160" trigger="click">
            <p class="ptb10 tx-c">确定删除 此项 吗？</p>
            <div class="tx-c">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="del(scope.row.id)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import {
  _eqmtMembersList,
  _historyUserList,
  _eqmtMembersAdd,
  _eqmtMembersDelete
} from "@/http/ajax";
export default {
  name: "associatedUser",
  data() {
    return {
      dialog: false,
      loading: false,
      tableData: [],
      form: { memberId: "" },
      memberList: [],
      eqmtid: 0,
      rules: {
        memberId: [{ required: true, message: "请选择关联用户", trigger: "change" }]}
    };
  },
  methods: {
    domInit(id) {
      this.dialog = true;
      this.eqmtid = id;
      this.getList();
    },
    getList() {
      this.tableData = [];
      _eqmtMembersList(
        { id: this.eqmtid },
        res => {
          this.tableData = res.data;
          let arr = [];
          this.tableData.forEach(el => {
            arr.push(el.id);
          });
          this.getMemberChoice(arr);
        },
        err => {}
      );
    },
    getMemberChoice(arr) {
      this.form.memberId = "";
      let user = JSON.parse(sessionStorage.user);
      let data = {
        page: 0,
        size: 9999,
        level:sessionStorage.level,
        deptId: user.deptId || user.dept.id || ""
      };
      _historyUserList(
        data,
        res => {
          res.content.forEach(el => {
            let isDisabled = false;
            arr.forEach(cid => {
              if (cid === el.id) {
                isDisabled = true;
              }
            });
            el["disabled"] = isDisabled;
          });
          this.memberList = res.content;
        },
        err => {}
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.form.memberId){
            _eqmtMembersAdd(
              { mid: this.form.memberId, id: this.eqmtid },
              res => {
                this.$message({
                  message: "添加成功",
                  type: "success"
                });
                this.getList();
              },
              err => {}
            );
          }else{
            this.$message({
              message: "请选择关联用户",
              type: "error"
            });
          }
        } else {
          return false;
        }
      });
    },
    del(id) {
      _eqmtMembersDelete(
        { mid: id, id: this.eqmtid },
        res => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getList();
        },
        err => {}
      );
    }
  }
};
</script>

<style lang="scss">
</style>
